<template>
	<view class="container">

		<view class="title">
			书架
		</view>

		<view class="segmentedControl">
			<view class="rit_title">
				<text style="color: #E5E6EB;">|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>

				<uv-image :src="editStatus?edits:editsing" @click="editTo" width="32rpx" height="32rpx"></uv-image>
			</view>
			<!-- 			<uni-segmented-control class="controller" :current="current" :values="items" @clickItem="onClickItem"
				styleType="text" activeColor="#008BFF"></uni-segmented-control> -->
			<uv-tabs keyName="dataType" :list="items" :current="current" @click="onClickItem"
				style="position: relative;z-index: 1;" :itemStyle="{
				width: '140rpx',
				height: '84rpx'}" :inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)',
							fontSize: '26rpx'
						}" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						fontSize: '32rpx',
						transform: 'scale(1.05)'
			    	}"></uv-tabs>
			<view class="content">
				<view v-show="current === 0">
					<image v-if="!dataInfo" src="../../static/空数据.png"
						style="width:750rpx ;height:560rpx ;margin-top: 160rpx;">
					</image>
					<bookResource v-else @flush="flushTo" @editsM="editTo" :customStyle2="customStyle2"
						@ToTrue="clear=true" @ToFalse="clear=false" :clear="clear" @selectToAll="selectToAll"
						@customEvent="click" :edit="editStatus" :data="dataInfo" :cardItem="data.list"
						@update:select="dataInfo.any = $event.name">
					</bookResource>
				</view>
				<view v-show="current === 1">
					<view class="list_container">
						<image v-if="!dataInfo" src="../../static/空数据.png"
							style="width:750rpx ;height:560rpx ;margin-top: 160rpx;">
						</image>
						<bookResource v-else @flush="flushTo" @editsM="editTo" :isTrue="true"
							:customStyle2="customStyle2" @ToTrue="clear=true" @ToFalse="clear=false" :clear="clear"
							@selectToAll="selectToAll" @customEvent="click" :edit="editStatus" :data="dataInfo"
							:cardItem="data.list" @update:select="dataInfo.any = $event.name">
						</bookResource>
						<!-- <bookResource v-else @flush="flushTo" @editsM="editTo"  @ToTrue="clear=true" @ToFalse="clear=false"
						 :customStyle2="customStyle2" @customEvent="click" :edit="editStatus"
							:data="dataInfo" :cardItem="data.list" isTrue="true" :select1="data.any"
							@update:select="data.any = $event.name"></bookResource> -->
					</view>
				</view>
				<view v-show="current === 2">
					<view class="list_container">
						<view class="resources_container" v-show="dataInfo">
							<!-- <view class="all" @click="open1">
								
								<text>{{data.videoAny}}</text>
								<view class="tabar">
									<uv-action-sheet ref="actionSheet" :closeOnClickOverlay="false"  :safeAreaInsetBottom="true" :actions="data.list" title="标题" @select="select" @close="close">
									</uv-action-sheet>
								</view>
								<uv-image src="../../static/下三角.png" width="32rpx" height="32rpx"></uv-image>
							</view> -->

							<uv-checkbox-group v-model="selectAll" shape="circle">

								<view class="resources1" style="margin-top: 30rpx;">
									<view class="resources1_item" v-for="(item, index) in dataInfo" :key="index">
										<image radius="10rpx" width="325rpx" height="248rpx" :src="item.cover" @click="tiao(item)"
											style="margin-left: 10rpx;border: 10rpx;width: 325rpx;height: 248rpx;box-shadow: 2px 2px 5px rgba(0, 0, 0.2, 0.5)">
										</image>
										<view class="text-wrapper" style="font-size: 26rpx;">
											<text class="ellipsisTo"
												style="margin-top: 20rpx;">{{item.resourceName}}</text>
										</view>
										<!-- 										<view class="icon-wrapper">
											<text class="icon">12:21</text>
										</view> -->
										<view style="position: absolute;z-index: 9999;top: 0%;">
											<uv-checkbox class="select_item" v-if="!editStatus"
												@change="click(item.collectId)" :name="item.id"></uv-checkbox>
										</view>
										<uv-tabbar v-if="!editStatus" class="jcontainer" fixed @click="close1"
											placeholder>
											<view class="select_all">
												<uv-checkbox-group v-model="selectObj" shape="circle">
													<uv-checkbox @change="selectToAll"
														:customStyle="{marginBottom: '8px'}" label="全选"
														name="全选"></uv-checkbox>
												</uv-checkbox-group>
												<view class="canel">
													<uv-modal ref="modal" title="标题"></uv-modal>
													<text @click="edit3">取消</text>
												</view>
												<view class="del_button">
													<uv-button size="large" text="删除" :icon="deletes"
														:custom-style="customStyle2" shape color="#F2F3F5"></uv-button>
												</view>
											</view>

										</uv-tabbar>
									</view>

								</view>
							</uv-checkbox-group>

						</view>
					</view>
					<view class="list_container" v-show="!dataInfo">
						<image src="../../static/空数据.png" style="width:750rpx ;height:560rpx ;margin-top: 152rpx;">
						</image>
					</view>
				</view>
				<view v-show="current === 3">
					<view class="list_container">
						<image v-if="!dataInfo" src="../../static/空数据.png"
							style="width:750rpx ;height:560rpx ;margin-top: 160rpx;">
						</image>
						<bookResource v-else @flush="flushTo" @editsM="editTo" :customStyle2="customStyle2"
							@ToTrue="clear=true" @ToFalse="clear=false" :clear="clear" @selectToAll="selectToAll"
							@customEvent="click" :edit="editStatus" :data="dataInfo" :cardItem="data.list"
							@update:select="dataInfo.any = $event.name">
						</bookResource>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import bookResource from '../../components/booksResource/booksResource.vue'
	import {
		ref,
		reactive,
		onMounted
	} from "vue";
	import useGetGlobalProperties from '@/util/useGlobal.js'
	const url = useGetGlobalProperties().$httpUrlWx;
	const urls = useGetGlobalProperties().$https;
	const book = useGetGlobalProperties().$book;
	const audio = useGetGlobalProperties().$audio;
	const journal = useGetGlobalProperties().$journal;
	const user = uni.getStorageSync('userInfo');
	const dataInfo = ref();

	const flushTo = (e) => {
		let id = '';
		if (current.value == 0) {
			id = book;
		} else if (current.value == 1) {
			id = audio;
		} else if (current.value == 3) {
			id = journal;
		}
		uni.request({
			url: urls + '/wxApi/collect/getUserResource/' + user.openId + '/' + id,
			method: 'GET',
			success: (res) => {
				dataInfo.value = res.data.data;
				console.log('dataInfo.value', dataInfo.value)
				uni.hideLoading()
			}
		})

	}
	const init = () => {
		uni.showLoading({
			title: '正在加载中'
		})
		if (user == null || user.openId == null) {
			uni.showToast({
				title: '请先登录!',
				icon: 'error',
				duration: 1500,
				mask: false
			});
			uni.navigateTo({
				// url: '/pages/admin/login'
			})
			return
		}
		uni.request({
			url: urls + '/ruralLibrary/bookDataType/list',
			method: 'GET',
			success: (res) => {
				console.log('type', res.data.data);
				items.value = res.data.data;
				uni.request({
					url: urls + '/wxApi/collect/getUserResource/' + user.openId + '/' + book,
					method: 'GET',
					success: (res) => {
						dataInfo.value = res.data.data;
						console.log('dataInfo.value', dataInfo.value)
						console.log('dataInfo.value.resourceName', dataInfo.value.resourceName)
						uni.hideLoading()
					}
				})
			}
		})

	}
	onMounted(() => {
		init();
	})
	const edits = url + '/edit.png'
	const editsing = url + '/editing.png'
	const deletes = url + '/delete.png'
	const customStyle2 = ref({
		border: 'none',
		width: '196rpx',
		height: '80rpx',
		background: '#F2F3F5',
		color: '#31373a',
		borderRadius: '10rpx'
	});
	const modal = ref();
	const selectObj = ref([]);
	const actionSheet = ref();
	const selectAll = ref([]);
	const clear = ref(false);
	const open1 = () => {
		uni.hideTabBar();
		actionSheet.value.open();
	}
	const select = (e) => {
		data.videoAny = e.name;
		uni.showTabBar();
	}
	const close = () => {
		uni.showTabBar();
		console.log("关闭");
	}
	const click = (e) => {
		console.log('eId', e)
		var l = selectAll.value.indexOf(e);
		if (l == -1) {
			selectAll.value.push(e);
			console.log(selectAll.value)
			return;
		}
		selectAll.value.splice(l, 1);
		console.log(selectAll.value)
	}
	const close1 = () => {
		uni.hideTabBar();
		console.log("关闭");
	}
	const open = () => {
		actionSheet.value.open();
	}
	const selectToAll = () => {
		console.log("1112323", selectAll.value);
		if (clear.value) {
			selectAll.value = [];
			clear.value = false;
			console.log("select1", selectAll.value);
			return;
		}
		selectAll.value = [];
		for (let i = 0; i < data1.childrens.length; i++) {
			selectAll.value.push(data1.childrens[i].id);
		}
		clear.value = true;
		console.log("select", selectAll.value);
	}
	const mySelect = reactive({});
	// const items = ref(['图书', '音频', '视频', '期刊']);
	const items = ref([{
		name: '图书',
	}, {
		name: '音频',
	}, {
		name: '视频'
	}, {
		name: '期刊'
	}]);
	const current = ref(0);
	const editStatus = ref(true);
	const editTo = () => {
		if (dataInfo.value == [] || dataInfo.value == null) {
			uni.showToast({
				title: '暂无数据编辑',
				icon: 'error',
				duration: 1500,
				mask: false
			});
			return;
		}
		console.log("1")
		if (editStatus.value) {
			uni.hideTabBar();
			editStatus.value = false;
			console.log("hide", editStatus.value)
			return;
		} else {
			uni.showTabBar();
			editStatus.value = true;

			console.log("show", editStatus.value)
		}
		uni.showTabBar();
		// console.log('点击啦'+data.editStatus);
	}
	const edit3 = () => {
		uni.showModal({
			title: '提示',
			content: '是否取消编辑',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					uni.showTabBar();
					editTo();
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
		uni.showTabBar();
	}
	const tiao = (i) => {
		let urls = '/pages/index/videoDetails/videoDetails?id=' + i.resourceId
		uni.navigateTo({
			url: urls
		})
	}
	const data = reactive({
		editSelect: [],
		editStatus: true,
		videoAny: '全部',
		any: '全部',
		list: [{
				name: '全部'
			}, {
				name: '已观看图书',
				color: '#008BFF',
			},
			{
				name: '已收藏图书'
			}
		],
		childrens: [{
				id: 213123123,
				url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
				name: '西方政治',
				author: '谷春德、吕世伦',
				desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
			},
			{
				id: 345,
				url: 'http://192.168.2.51:8099/api/ruralLibrary/user/lengleng/df656d16ff7746099b810387f771b9a6.jpg',
				name: '雷锋精神',
				author: '《雷锋全集》编写组',
				desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
			},
			{
				id: 344245,
				url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
				name: '用法读本',
				author: '农业部人事劳动司、农业部产业政策与法规司',
				desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
			},
			{
				id: 344245,
				url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
				name: '航空母舰传奇',
				author: '谷春德、吕世伦',
				desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
			},
			{
				id: 344245,
				url: 'http://192.168.2.51:8099/api/ruralLibrary/user/lengleng/df656d16ff7746099b810387f771b9a6.jpg',
				name: '发现自然',
				author: '《雷锋全集》编写组',
				desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
			},
			{
				id: 344245,
				url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
				name: '农业领导干部学法用法',
				author: '农业部人事劳动司、农业部产业政策与法规司',
				desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
			},
			{
				id: 344245,
				url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
				name: '西方政治',
				author: '谷春德、吕世伦',
				desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
			},
			{
				id: 344245,
				url: 'http://192.168.2.51:8099/api/ruralLibrary/user/lengleng/df656d16ff7746099b810387f771b9a6.jpg',
				name: '雷锋精神',
				author: '《雷锋全集》编写组',
				desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
			},
			{
				id: 344245,
				url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
				name: '用法读本',
				author: '农业部人事劳动司、农业部产业政策与法规司',
				desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
			}

		],
		categoty: [
			'电子书',
			'有声图书',
			'报纸'
		]
	});

	const onClickItem = (e) => {
		console.log("e", e)
		const book = uni.getStorageSync('book')
		const audio = uni.getStorageSync('audio')
		const journal = uni.getStorageSync('journal')
		const vedio = uni.getStorageSync('vedio')
		if (current.value !== e.index) {
			uni.showLoading({
				title: '正在加载中'
			})
			current.value = e.index;
			// uni.hideTabBar();
			clear.value = false
			selectAll.value = []
			let id = '';
			if (current.value == 0) {
				id = book;
								uni.request({
									url: urls + '/wxApi/collect/getUserResource/' + user.openId + '/' + id,
									method: 'GET',
									success: (res) => {
										dataInfo.value = res.data.data;
										console.log('dataInfo.value', dataInfo.value)
										console.log('res',res)
										uni.hideLoading()
									}
								})
			} else if (current.value == 1) {
				id = audio;
								uni.request({
									url: urls + '/wxApi/collect/getUserResource/' + user.openId + '/' + id,
									method: 'GET',
									success: (res) => {
										dataInfo.value = res.data.data;
										console.log('dataInfo.value', dataInfo.value)
										console.log('res',res)
										uni.hideLoading()
									}
								})
			} else if (current.value == 3) {
				id = journal;
								uni.request({
									// url:  'https://weixin.shuzinongyue.com:8942/collect/list',
									url:  'http://61.163.243.13:8944/collect/list',
									url:  'https://wechat.shuzinongyue.com:8922/collect/list',
									method: 'POST',
									data:{
										openId:user.openId
									} ,
									success: (res) => {
										dataInfo.value = res.data.data;
										console.log('dataInfo.value', dataInfo.value)
										console.log('res',res)
										uni.hideLoading()
									}
								})
			} else if(current.value==2){
				id = vedio;
					uni.request({
									url: urls + '/wxApi/collect/getUserResource/' + user.openId + '/' + id,
									method: 'GET',
									success: (res) => {
										dataInfo.value = res.data.data;
										console.log('dataInfo.value', dataInfo.value)
										console.log('res',res)
										uni.hideLoading()
									}
								})
							}
			}

			// uni.request({
			// 	url: urls + '/wxApi/collect/getUserResource/' + user.openId + '/' + id,
			// 	method: 'GET',
			// 	success: (res) => {
			// 		dataInfo.value = res.data.data;
			// 		console.log('dataInfo.value', dataInfo.value)
			// 		console.log('res',res)
			// 		uni.hideLoading()
			// 	}
			// })
		
	};
	const list = reactive({
		list: [{
			titile: '第9集河南坠子《偷年糕》.mp4',
		}],
	})

	const data1 = reactive({

		childrens: [

		]
	})
</script>

<style scoped>
	.ellipsisTo {
		text-align: center;
		width: 200rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		margin-top: 5%;
		margin-left: auto;
	}

	.del_button {
		margin-left: 38rpx;
		position: relative;
		bottom: 18rpx;
		left: 75%;
	}

	.canel {
		position: relative;
		left: 75%;
		/* 		margin-left: 85%; */
		font-size: 26rpx;
		padding-bottom: 8rpx;
		color: #86909C;
	}

	.select_all {
		margin-top: 50rpx;
		margin-left: 40rpx;
		display: flex;

	}

	.select_item {
		z-index: 9999;
		position: absolute;
		top: -50rpx;
	}

	.all {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 32rpx;
	}

	.icon-wrapper {
		position: absolute;
		bottom: 80rpx;
		right: 38rpx;
	}

	.icon {
		width: 42rpx;
		height: 40rpx;
		font-size: 24rpx;

		color: #fff;
	}

	.resources1 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		padding-right: 23rpx;
		padding-left: 6rpx;
		margin-left: -4rpx;
		/* 负值修复左右间隙 */
	}

	.resources1_item {
		width: calc(50% - 7rpx);
		/* 一行显示两个，减去左右间隙 */
		position: relative;
		margin-left: 5rpx;
		margin-bottom: 5rpx;
		left: 20rpx;
		height: 300rpx;
		/* 设置一个固定高度 */
	}

	.text-wrapper {
		text-align: center;
		/* 文字左对齐 */
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.rit_title {
		display: flex;
		align-items: center;
		position: fixed;
		right: 6%;
		top:14%;
		z-index: 999;
	}

	.divider {
		position: relative;
		bottom: 34rpx;
		margin-bottom: 0;

	}

	.controller {
		width: 580rpx;
		height: 84rpx;
	}

	.segmentedControl {
		margin-top: 20%;
		position: relative;
	}

	.title {
		padding: 0 20rpx;
		font-size: 38rpx;
		margin-top: 80rpx;
	}

	.container {
		font-family: my-font;
		padding-bottom: 200rpx;
	}
</style>